import {
    Bar,
    Tooltip,
    BarChart,
    CartesianGrid,
    ResponsiveContainer,
    XAxis,
    YAxis, Rectangle
} from "recharts";
import {QuestionCheckboxStatType} from "./interface";


export const StatComponent = ({stat}: QuestionCheckboxStatType) => {
    return (
        <div style={{width: '300px', height: '400px'}}>
            <ResponsiveContainer width={'100%'} height={'100%'}>
                <BarChart width={400} height={300} data={stat}
                          margin={{top: 5, right: 30, left: 0, bottom: 5}}>
                    <CartesianGrid strokeDasharray="3 3"/>
                    <XAxis dataKey="name"/>
                    <YAxis/>
                    <Tooltip/>
                    <Bar dataKey="count" fill="#8884d8" activeBar={<Rectangle fill="gold" stroke="purple"/>}/>
                </BarChart>
            </ResponsiveContainer>
        </div>
    );
};